<template>
	<view>
		<u-navbar title="">
			<view class="u-flex u-flex-1 u-row-center">
				<view class="TypeTag">
					<view class="u-p-x-30 u-flex" :class="type==0?'cur':''" @tap="typeChange(0)">收支明细</view>
					<view class="u-p-x-30 u-flex" :class="type==1?'cur':''" @tap="typeChange(1)">提现记录</view>
				</view>
			</view>
		</u-navbar>
		<block v-if="type==0">
			<u-sticky>
				<view class="bg-gray u-p-x-30 u-p-y-20">
					<button class="cu-btn bg-white round " @tap="calendar.show=true">筛选 <text class="cuIcon-search margin-left-xs"></text></button>
					<!-- <button class="cu-btn bg-white round  margin-left" @tap="showModal('searchTypeModal')">类别 <text class="cuIcon-triangledownfill margin-left-xs"></text></button> -->
				</view>
			</u-sticky>
			<view class="cu-list menu">
				<view class="cu-item" v-for="item in income.list" :key="item.id">
					<view class="content padding-tb-sm">
						<view>{{item.title}}</view>
						<view class="text-gray text-sm">{{item.createDate}}</view>
					</view>
					<view class="action" :class="{'cuIcon-move text-orange':item.sort==1,'cuIcon-add text-green':item.sort==0}">
						<text class="text-price">{{item.money|money}}</text>
					</view>
				</view>
				<view v-if="income.nomore&&!income.list.length"  class="u-p-50 u-text-center">
					暂无数据
				</view>
			</view>
		</block>
		<block v-if="type==1">
			<view class="cu-list menu">
				<view class="cu-item" v-for="item in cashout.list" :key="item.id">
					<view class="content padding-tb-sm">
						<view>{{item.title}}</view>
						<view class="text-gray text-sm">{{item.createDate}}</view>
					</view>
					<view class="action cuIcon-move text-orange">
						<text class="text-price">{{item.money|money}}</text>
					</view>
				</view>
				<view v-if="cashout.nomore&&!cashout.list.length"  class="u-p-50 u-text-center">
					暂无数据
				</view>
			</view>
		</block>
		<u-calendar v-model="calendar.show" mode="range" @change="timeChange"></u-calendar>
		<view class="cu-modal bottom-modal" style="z-index: 980;" :class="modalName=='searchTypeModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="modalName=''">取消</view>
					<view class="action text-green" @tap="confirm">确定</view>
				</view>
				<view class="grid col-3 padding-lr-sm padding-bottom-sm bg-white">
					<view v-for="(item,index) in searchTypeList" class="padding-xs" :key="index">
						<view class="padding-sm radius" :class="searchType==item.value?'bg-orange':'bg-gray'" @tap="ChooseTypeList(item)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import walletAPI from "@/api/wallet.js"
	export default {
		data() {
			return {
				type: 0,
				modalName: null,
				income:{
					startDate:'',
					endDate:'',
					list:[],
					pageNo:1,
					pageSize:15,
					nomore:false
				},
				cashout:{
					list:[],
					pageNo:1,
					pageSize:15,
					nomore:false
				},
				calendar:{
					show:false
				},
				searchType: -1,
				searchTypeList: [{"value":-1,"name":"全部"},{"value":"1","name":"系统"},{"value":"2","name":"转账"},{"value":"3","name":"红包"},{"value":"4","name":"退货"},{"value":"5","name":"退款"},{"value":"6","name":"充值"},{"value":"7","name":"送礼"}]
			}
		},
		filters:{
			billType(val){
				return billTypes[val]||'';
			},
			money(val){
				return val.toFixed(2);
			}
		},
		onLoad({type=0}) {
			this.typeChange(Number(type))
		},
		onReachBottom() {
			if(this.type==0){
				this.moreIncome()
			}
			if(this.type==1){
				this.moreCashout()
			}
		},
		methods: {
			typeChange(type) {
				this.type = type
				if(type==0&&!this.income.list.length&&!this.income.nomore){
					this.resetIncome()
				}
				if(type==1&&!this.cashout.list.length&&!this.cashout.nomore){
					this.resetCashout()
				}
			},
			showModal(e) {
				this.modalName = e
			},
			async confirm() {
				this.modalName = null
			},
			ChooseTypeList(item) {
				this.searchType = item.value
			},
			timeChange({startDate,endDate}){
				this.income.startDate = `${startDate} 00:00:00`
				this.income.endDate = `${startDate} 23:59:59`
				this.resetIncome()
			},
			async resetIncome(){
				this.income.list = []
				this.income.nomore = false
				this.income.pageNo = 1
				await this.moreIncome()
			},
			async moreIncome(){
				if(this.moreIncome.lock){
					throw new Error('正在请求中')
				}
				try{
					this.moreIncome.lock = true
					if(this.income.nomore){
						return []
					}
					const list = await walletAPI.incomeList(this.income)
					if(!list||list.length<this.income.pageSize){
						this.income.nomore = true
					}else{
						this.income.pageNo++
					}
					this.income.list.push(...list)
				}finally{
					this.moreIncome.lock = false
				}
			},
			async resetCashout(){
				this.cashout.list = []
				this.cashout.nomore = false
				this.cashout.pageNo = 1
				await this.moreCashout()
			},
			async moreCashout(){
				if(this.moreCashout.lock){
					throw new Error('正在请求中')
				}
				try{
					this.moreCashout.lock = true
					if(this.cashout.nomore){
						return []
					}
					const list = await walletAPI.cashRecord(this.cashout.pageNo,this.cashout.pageSize)
					if(!list||list.length<this.cashout.pageSize){
						this.cashout.nomore = true
					}else{
						this.cashout.pageNo++
					}
					this.cashout.list.push(...list)
				}finally{
					this.moreCashout.lock = false
				}
			}
		}
	}
</script>

<style>
	.cu-custom .cu-bar .content {
		pointer-events: all;
	}

	.TypeTag {
		border: 1px solid #0076E1;
		border-radius: 6rpx;
		display: flex;
		font-size: 24upx;
		height: 60upx;
		text-align: center;
	}

	.TypeTag view {
		color: #0076E1;
		flex: 1;
	}

	.TypeTag view.cur {
		color: #FFFFFF;
		background: #0076E1;
	}
</style>
